<template>
    <div class="contract_main">
        <el-row class="head">
            <el-col :span="24">
                <h1 class="contract_title" style="margin-left: 30px!important;">产品列表</h1>
            </el-col>
        </el-row>
        <!--新增产品-->
        <el-dialog v-dialogDrag :visible.sync="addproductVisible" width="50%" :close-on-click-modal="false" >
            <add_product></add_product>
        </el-dialog>
        <el-dialog v-dialogDrag :visible.sync="updateproductVisible" width="50%" :close-on-click-modal="false" >
            <update_product ref="changeData"></update_product>
        </el-dialog>
        <el-row class="nav">
            <el-col>
                <!--新增按钮-->
                <div class="nav-item">
                    <el-button type="text" @click="open_add_product()">
                        <i class="iconfont icon-qianbi icon-sty"></i>新增
                    </el-button>
                </div>
                <!--批量下架按钮-->
                <div class="nav-item">
                    <el-button type="text" @click="change_proon()">
                        <i class="iconfont icon-shanchu icon-sty"></i>下架
                    </el-button>
                </div>
                <!--产品分类维护按钮-->
                <div class="nav-item">
                    <el-button type="text" @click="changeClassily()">
                        <i class="iconfont icon-biaodan icon-sty"></i>产品分类维护
                    </el-button>
                </div>
                <!--Excel导出按钮-->
                <div class="nav-item">
                    <download-excel :data="allProduct" :fields="excelFields" name="产品列表.xls" type="xls">
                        <el-button type="text">
                            <i class="iconfont icon-excel"></i>Excel导出
                        </el-button>
                    </download-excel>
                </div>
                <div class="selectDiv">
                    <el-form>
                        <el-form-item>
                            <el-select placeholder="请选择查询方式" v-model="selectModel" style="border-radius:4px;height:40px;width:150px!important;margin-left:-90px" >
                                <el-option v-for="i in selectData" :label="i.label" :value="i.value" :key="i.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-input placeholder="请输入查询内容" style="width:150px!important;margin-left: -80px" v-model="searchText"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button style="margin-left: -70px" @click="searchPro">查询</el-button>
                            <el-button @click="clearSearchPro">显示全部</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
        <div class="content">
            <el-tabs type="card">
                <!--树形控件-->
                <div style="width:20%;float:left;margin-bottom: 20px" v-loading="load">
                    <el-input placeholder="输入关键字进行过滤" v-model="filterText" style="margin: 8px;width: 200px !important;">
                    </el-input>
                    <div class="qb" @click="allPro">全部</div>
                    <el-tree class="filter-tree" style="margin:0px 10px" :data="categoryList" :id="proClassilyId"
                             :props="{id:'proClassilyId',children:'sonClassily',label:'proClassilyName'}"
                             :filter-node-method="filterNode" ref="tree" @node-click="findPro">
                    </el-tree>
                </div>
                <!--产品列表-->
                <div style="float: left;width:79%">
                    <el-table :data="allProductList" ref="multipleTable" v-loading="loading" style="font-size: 14px!important;">
                        <el-table-column type="selection"></el-table-column>
                        <el-table-column prop="proDetailId" label="产品编号" align="center"></el-table-column>
                        <el-table-column label="产品图片" prop="proImgSrc" align="center">
                            <template slot-scope="s">
                                <el-image :src="s.row.proImgSrc" style="width:50px;height:50px"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="product.productBrand" label="产品品牌" align="center"></el-table-column>
                        <el-table-column prop="product.productName" label="产品名称" align="center"></el-table-column>
                        <el-table-column prop="proNum" label="产品数量" align="center"></el-table-column>
                        <el-table-column prop="abilities" label="规格属性" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="s">
                                <span v-for="item in s.row.abilities" :key="item.abilityId">{{item.abilityName}} </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="proOn" label="是否上架" align="center">
                            <template slot-scope="s">
                                <span>{{s.row.proOn==1?"是":"否"}}</span>
                            </template>
                        </el-table-column>
                       <el-table-column label="操作" align="center">
                            <template slot-scope="s">
                                <el-button type="primary" icon="el-icon-view" circle @click="go_detail(s.row)"></el-button>
                                <el-button type="primary" icon="el-icon-edit" circle @click="change_product(s.row)"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--分页-->
                    <br/>
                    <el-pagination background layout="total, prev, pager, next" :total="total" :current-page.sync="currPage"
                            :page-size="pageSize"  style="margin-left: 30px" @current-change="change_page">
                    </el-pagination>
                    <br/>
                </div>
                <div style="clear: both"></div>
            </el-tabs>
        </div>
    </div>
</template>
<script>
    import add_product from "./add_product"
    import update_product from "./update_product"

    export default {
        name: "product",
        components:{add_product,update_product},
        data: function() {
            return {
                load:true,
                loading:true,
                //当前页码
                currPage:1,
                //页大小
                pageSize:3,
                //总页数
                total:0,
                //树形结构过滤关键字
                filterText: '',
                //产品列表数据
                allProductList:[],
                //树形控件，产品分类数据
                categoryList: [],
                //新增产品弹框状态
                addproductVisible:false,
                updateproductVisible:false,
                //传去详情页面的数据
                detailData:{},
                //产品条件查询关键字
                searchText:'',
                //产品条件查询数据
                selectModel:'',
                selectData:[{value:1,label:'产品名称',},{value:2,label:'产品编号'}],
                //根据树形结构查询产品关键字
                procid:0,
                //Excel导出数据
                allProduct:[],
                //Excel导出对应关系
                excelFields: {
                    "产品编号": "proDetailId",
                    "产品名称": "product.productName",		//支持嵌套属性
                    "产品分类": "product.proClassily.proClassilyName",
                    "产品品牌": "product.productBrand",
                    "产品售价": "proPrice",
                    "产品数量": "proNum",
                    "是否上架": {
                        field: "proOn",
                        callback: value => {
                            if(value==1){
                                return "是"
                            }else{
                                return "否"
                            }
                        }
                    },
                    "属性规格": {
                        field: "abilities",
                        callback: value => {
                            let abilities = ""
                            value.forEach(pl => {
                                abilities += " " + pl.abilityName
                            })
                            return abilities
                        }
                    },
                }
            };
        },
        methods: {
            //树形控件，产品分类查询
            classily(){
                this.load = true
                this.axios.get("api/product/classily-list").then(v=>{
                    this.categoryList=v.data;
                    this.load = false
                }).catch(() => {
                    this.load = false
                    this.global.mes_error("获取数据失败！")
                })
            },
            //产品列表查询
            get_product(currPage){
                this.loading = true
                this.axios.get("api/product/product-list",
                    {params:{"currPage":currPage,"proClassilyId":this.procid,"pageSize":this.pageSize,"searchText":this.searchText,"selectModel":this.selectModel}}).then(v=>{
                    this.allProductList=v.data.data;
                    this.total=v.data.total;
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                    this.global.mes_error("获取数据失败！")
                })
            },
            //Excel导出数据
            all_product(){
                this.axios.get("api/product/all-product").then(v=>{
                    this.allProduct=v.data;
                }).catch()
            },
            //产品条件查询
            searchPro(){
                this.get_product(this.currPage);
            },
            clearSearchPro(){
                this.searchText=''
                this.selectModel=''
                this.get_product(this.currPage);
            },
            //根据树形结构查询产品
            findPro(data){
                this.procid=data.proClassilyId
                this.get_product(this.currPage);
            },
            allPro(){
                this.procid=0
                this.get_product(this.currPage)
            },
            //修改产品状态，一键下架
            change_proon(){
                let select_data = this.$refs.multipleTable.selection;
                select_data.forEach(item => {
                    this.axios.get("api/product/change-proon",{params:{"proDetailId":item.proDetailId}}).then(v=>{
                        window.console.log(item.proDetailId);
                    }).catch(err => {
                        window.console.log(err)
                    })
                })
                this.get_product(this.currPage);
                this.global.mes_success("下架成功");
            },
            //修改产品
            change_product(row){
                this.$store.dispatch("setVueProduct",this);
                this.updateproductVisible = true;
                this.detailData=row
                window.console.log(row)
                this.$nextTick(function () {
                    this.detailData.abilities.forEach(i=>{
                        let obj={}
                        let ob={}
                        obj.attrId=i.attribute.attrId;
                        obj.attributeName=i.attribute.attrName;
                        obj.abilityId=i.abilityId;
                        obj.abilityName=i.abilityName;
                        ob.abilityName=i.abilityName;
                        ob.abilityId=i.abilityId;
                        ob.attribute=null;
                        ob.proDetails=null
                        this.$refs.changeData.attributeList.push(obj)
                        this.$refs.changeData.abilities.push(ob)
                    })
                    this.$refs.changeData.product.productId=this.detailData.product.productId;
                    this.$refs.changeData.product.proClassily=this.detailData.product.proClassily;
                    this.$refs.changeData.product.productName=this.detailData.product.productName;
                    this.$refs.changeData.product.productBrand=this.detailData.product.productBrand;
                    this.$refs.changeData.proDetails.proDetailId=this.detailData.proDetailId;
                    this.$refs.changeData.proDetails.proPrice=this.detailData.proPrice;
                    this.$refs.changeData.proDetails.proOn=this.detailData.proOn;
                    this.$refs.changeData.proDetails.proNum=this.detailData.proNum;
                    this.$refs.changeData.proDetails.wareNum=this.detailData.wareNum;
                    this.$refs.changeData.proDetails.proImgSrc=this.detailData.proImgSrc;
                })
            },
            //查看详情
            go_detail(row){
                this.detailData=row
                sessionStorage.setItem("product", JSON.stringify(this.detailData))
                this.$router.push({path:"/product_detail"})
            },
            //跳转到产品分类维护页面
            changeClassily(){
                this.$router.push({
                    path:"/classily"
                })
            },
            //关键字过滤函数
            filterNode(value, data) {
                if (!value) return true;
                return data.proClassilyName.indexOf(value) !== -1;
            },
            //分页页码改变事件
            change_page(currPage){
                this.get_product(currPage);
            },
            //打开新增产品弹框
            open_add_product(){
                this.$store.dispatch("setVueProduct",this);
                this.addproductVisible = true;
            }
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        created() {
            this.get_product(this.currPage);
            this.all_product();
            this.classily();
        }
    };
</script>
<style scoped>
    *{margin: 0;padding: 0;font-size: 14px}
    .contract_main{background: #e4e7ee}
    .head{height:70px;background: #f8f6f8;line-height: 70px}
    .contract_title{display: inline-block;font-weight: unset;margin-left: 20px;padding-right: 3px;font-size: 25px}
    .el-col span{color: #b4b4bc}
    .nav {margin: 20px;background: #fcfbfd;width: 100%-40px;height:auto; min-height:55px !important;line-height: 55px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);}
    .nav .nav-item {display: inline-block;height: 45px;padding: 0px 15px;border-right: 1px solid #dcdfe6;line-height: 45px;}
    .nav .nav-item .el-button{color:grey}
    .content{margin: 20px;background: #fcfbfd;width: 100%-40px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);}
    .el-table .el-button{width: 30px;height: 30px}
    .el-button.is-circle{padding: 2px !important;}
    .el-tabs__header{margin-bottom: 0px !important;}
    /*分页修改背景颜色*/
    .el-pagination .el-input__inner{width: 40px!important;height: 30px!important;}
    /*图标样式*/
    .icon-sty{font-size: 15px;padding-right: 3px;}
    .selectDiv .el-form-item{width:150px;display:inline-block;float:left;margin-bottom: 0px !important;}
    .el-col span {color:grey;}
    .nav-item .el-button{margin-top: -8px}
    .selectDiv{margin-top:7px;float:right;margin-right:-25px}
    .qb{background:white;margin-left: 10px;margin-right: 10px;padding:3px 0px 3px 24px;cursor: pointer;color:rgb(100 100 100)}
    .qb:hover{background: rgb(245 245 245)}
</style>